<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日语对话翻译与发音</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            line-height: 1.6;
            background: linear-gradient(135deg, #f5f7fa 0%, #e4efe9 100%);
            color: #333;
            padding: 20px;
            min-height: 100vh;
        }
        .container {
            max-width: 900px;
            margin: 0 auto;
            background: white;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }
        header {
            background: linear-gradient(135deg, #3498db 0%, #2c3e50 100%);
            color: white;
            padding: 25px;
            text-align: center;
        }
        h1 {
            font-size: 2.2rem;
            margin-bottom: 10px;
        }
        .subtitle {
            font-size: 1rem;
            opacity: 0.9;
        }
        .content {
            padding: 25px;
        }
        .dialogue-container {
            margin-bottom: 30px;
        }
        .dialogue-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 2px solid #3498db;
        }
        .section-title {
            font-size: 1.5rem;
            color: #2c3e50;
        }
        .instruction {
            color: #7f8c8d;
            font-size: 0.9rem;
        }
        .dialogue-line {
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 15px;
            padding: 15px;
            border-radius: 10px;
            background: #f8f9fa;
            transition: all 0.3s ease;
            border-left: 4px solid #3498db;
        }
        .dialogue-line:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
        }
        .japanese {
            flex: 1;
            min-width: 250px;
            font-size: 1.3rem;
            font-weight: bold;
            margin-bottom: 10px;
        }
        .romaji {
            flex: 1;
            min-width: 250px;
            padding: 0 15px;
            color: #7d3c98;
            font-style: italic;
            margin-bottom: 10px;
            border-left: 1px dashed #ddd;
        }
        .chinese {
            flex: 1;
            min-width: 250px;
            padding-left: 15px;
            color: #2c3e50;
            margin-bottom: 10px;
            border-left: 1px dashed #ddd;
        }
        .pronunciation-btn {
            background: linear-gradient(to bottom, #3498db, #2980b9);
            color: white;
            border: none;
            border-radius: 25px;
            padding: 10px 20px;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 10px auto 0;
            width: 100%;
            max-width: 200px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        .pronunciation-btn:hover {
            background: linear-gradient(to bottom, #2980b9, #3498db);
            box-shadow: 0 6px 12px rgba(0,0,0,0.15);
            transform: translateY(-2px);
        }
        .pronunciation-btn:active {
            transform: translateY(0);
        }
        .btn-icon {
            margin-right: 8px;
        }
        .note {
            background: #e8f4fc;
            padding: 20px;
            border-radius: 10px;
            margin-top: 30px;
            border-left: 4px solid #3498db;
        }
        .note-title {
            font-weight: bold;
            color: #2c3e50;
            margin-bottom: 10px;
            font-size: 1.1rem;
        }
        .note-content {
            color: #7f8c8d;
            line-height: 1.5;
        }
        .footer {
            text-align: center;
            padding: 20px;
            color: #7f8c8d;
            font-size: 0.9rem;
            border-top: 1px solid #eee;
        }
        /* 移动设备优化 */
        @media (max-width: 768px) {
            .dialogue-line {
                flex-direction: column;
            }
            .romaji, .chinese {
                padding: 10px 0;
                border-left: none;
                border-top: 1px dashed #ddd;
            }
            .japanese, .romaji, .chinese {
                min-width: 100%;
            }
            .pronunciation-btn {
                margin-top: 15px;
            }
        }
        /* 语音状态提示 */
        .speech-status {
            text-align: center;
            margin-top: 10px;
            font-size: 0.9rem;
            color: #7f8c8d;
            height: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>日语对话翻译与发音</h1>
            <p class="subtitle">点击发音按钮可听到慢速日语发音</p>
        </header>
        
        <div class="content">
            <div class="dialogue-container">
                <div class="dialogue-header">
                    <div class="section-title">对话内容</div>
                    <div class="instruction">点击右侧按钮听取发音</div>
                </div>
                
                <div class="dialogue-line">
                    <div class="japanese">初めまして</div>
                    <div class="romaji">Hajimemashite</div>
                    <div class="chinese">初次见面。</div>
                    <button class="pronunciation-btn" onclick="speak('初めまして')">
                        <span class="btn-icon">🔊</span> 发音
                    </button>
                    <div class="speech-status" id="status-1"></div>
                </div>
                
                <div class="dialogue-line">
                    <div class="japanese">佐藤 さとう</div>
                    <div class="romaji">Satō</div>
                    <div class="chinese">佐藤</div>
                    <button class="pronunciation-btn" onclick="speak('佐藤')">
                        <span class="btn-icon">🔊</span> 发音
                    </button>
                    <div class="speech-status" id="status-2"></div>
                </div>
                
                <div class="dialogue-line">
                    <div class="japanese">やまだ 山田</div>
                    <div class="romaji">Yamada</div>
                    <div class="chinese">山田</div>
                    <button class="pronunciation-btn" onclick="speak('山田')">
                        <span class="btn-icon">🔊</span> 发音
                    </button>
                    <div class="speech-status" id="status-3"></div>
                </div>
                
                <div class="dialogue-line">
                    <div class="japanese">おはよう ございます。</div>
                    <div class="romaji">Ohayō gozaimasu</div>
                    <div class="chinese">早上好。（敬语表达）</div>
                    <button class="pronunciation-btn" onclick="speak('おはようございます')">
                        <span class="btn-icon">🔊</span> 发音
                    </button>
                    <div class="speech-status" id="status-4"></div>
                </div>
                
                <div class="dialogue-line">
                    <div class="japanese">おはよう ございます。</div>
                    <div class="romaji">Ohayō gozaimasu</div>
                    <div class="chinese">早上好。（敬语表达）</div>
                    <button class="pronunciation-btn" onclick="speak('おはようございます')">
                        <span class="btn-icon">🔊</span> 发音
                    </button>
                    <div class="speech-status" id="status-5"></div>
                </div>
                
                <div class="dialogue-line">
                    <div class="japanese">佐藤さん、こちらはマイク・ミラーさんです。</div>
                    <div class="romaji">Satō-san, kochira wa Maiku Mirā-san desu</div>
                    <div class="chinese">佐藤女士，这位是迈克·米勒先生。</div>
                    <button class="pronunciation-btn" onclick="speak('佐藤さん、こちらはマイク・ミラーさんです')">
                        <span class="btn-icon">🔊</span> 发音
                    </button>
                    <div class="speech-status" id="status-6"></div>
                </div>
                
                <div class="dialogue-line">
                    <div class="japanese">初めまして。</div>
                    <div class="romaji">Hajimemashite</div>
                    <div class="chinese">初次见面。</div>
                    <button class="pronunciation-btn" onclick="speak('初めまして')">
                        <span class="btn-icon">🔊</span> 发音
                    </button>
                    <div class="speech-status" id="status-7"></div>
                </div>
                
                <div class="dialogue-line">
                    <div class="japanese">マイク・ミラーです。</div>
                    <div class="romaji">Maiku Mirā desu</div>
                    <div class="chinese">我是迈克·米勒。</div>
                    <button class="pronunciation-btn" onclick="speak('マイク・ミラーです')">
                        <span class="btn-icon">🔊</span> 发音
                    </button>
                    <div class="speech-status" id="status-8"></div>
                </div>
                
                <div class="dialogue-line">
                    <div class="japanese">アメリカから 来ました。</div>
                    <div class="romaji">Amerika kara kimashita</div>
                    <div class="chinese">从美国来的。</div>
                    <button class="pronunciation-btn" onclick="speak('アメリカから来ました')">
                        <span class="btn-icon">🔊</span> 发音
                    </button>
                    <div class="speech-status" id="status-9"></div>
                </div>
                
                <div class="dialogue-line">
                    <div class="japanese">どうぞよろしく。</div>
                    <div class="romaji">Dōzo yoroshiku</div>
                    <div class="chinese">请多关照。</div>
                    <button class="pronunciation-btn" onclick="speak('どうぞよろしく')">
                        <span class="btn-icon">🔊</span> 发音
                    </button>
                    <div class="speech-status" id="status-10"></div>
                </div>
                
                <div class="dialogue-line">
                    <div class="japanese">佐藤けい子です。</div>
                    <div class="romaji">Satō Keiko desu</div>
                    <div class="chinese">我是佐藤惠子。</div>
                    <button class="pronunciation-btn" onclick="speak('佐藤けい子です')">
                        <span class="btn-icon">🔊</span> 发音
                    </button>
                    <div class="speech-status" id="status-11"></div>
                </div>
                
                <div class="dialogue-line">
                    <div class="japanese">どうぞよろしく。</div>
                    <div class="romaji">Dōzo yoroshiku</div>
                    <div class="chinese">请多关照。</div>
                    <button class="pronunciation-btn" onclick="speak('どうぞよろしく')">
                        <span class="btn-icon">🔊</span> 发音
                    </button>
                    <div class="speech-status" id="status-12"></div>
                </div>
            </div>
            
            <div class="note">
                <div class="note-title">使用说明</div>
                <div class="note-content">
                    <p>1. 点击"发音"按钮听取日语发音（设置为慢速，便于学习）</p>
                    <p>2. 移动设备上可能需要用户交互（如点击）后才能播放声音</p>
                    <p>3. 如果无法发音，请尝试使用Chrome、Edge或Safari浏览器</p>
                    <p>4. 注：日文中的姓氏"佐藤"和"山田"保留了汉字写法，发音使用罗马音标注；敬语表达"ございます"在翻译中采用括号说明；人名"マイク・ミラー"采用中文常用译名"迈克·米勒"</p>
                </div>
            </div>
        </div>
        
        <div class="footer">
            <p>日语对话翻译工具 &copy; 2023</p>
        </div>
    </div>

    <script>
        // 解决移动设备上语音合成需要用户交互的问题
        let speechSynthesisAllowed = false;
        
        // 在用户与页面交互后启用语音合成
        document.addEventListener('click', function() {
            speechSynthesisAllowed = true;
        }, { once: true });
        
        function speak(text) {
            if (!speechSynthesisAllowed) {
                alert('请先点击页面任意位置激活语音功能');
                return;
            }
            
            if ('speechSynthesis' in window) {
                // 停止任何当前正在播放的语音
                window.speechSynthesis.cancel();
                
                const utterance = new SpeechSynthesisUtterance(text);
                utterance.lang = 'ja-JP';
                utterance.rate = 0.7; // 设置慢速发音
                utterance.pitch = 1.0;
                utterance.volume = 1;
                
                // 显示语音状态
                const statusElement = document.getElementById('status-' + text.length);
                if (statusElement) {
                    statusElement.textContent = '发音中...';
                    
                    utterance.onend = function() {
                        statusElement.textContent = '';
                    };
                    
                    utterance.onerror = function() {
                        statusElement.textContent = '发音出错';
                    };
                }
                
                speechSynthesis.speak(utterance);
            } else {
                alert('抱歉，您的浏览器不支持语音合成功能。请尝试使用Chrome、Edge或Safari浏览器。');
            }
        }
    </script>
</body>
</html>